body {
  position: relative;
}

#app {
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;

  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
    -webkit-appearance: button;
    background-color: initial;
    background-image: initial;
  }
}

.container {
  width: 100%;
  height: 100%;
  min-width: 1200px !important;
}

.container-item {
  border-bottom: 1px solid var(--gray-light);
  /* border-radius: 0.375rem !important; */
}

/* 全局字体 颜色  */
:not(not) {
  --white: #ffffff;
  --gray: #818181;
  --gray-light: rgba(129, 129, 129, 0.2);
  --black: #656565;
  --blue: #409EFF;
  --blue-bg: #66b1ff;
  --blue-light: #ecf5ff;
  --blue-light-border: #b3d8ff;
  --red: #F56C6C;

  /* 色彩搭配 */
  --primary: #409EFF;
  --primary-bg: #c6e2ff;
  --primary-light: #ecf5ff;
  --success: #67C23A;
  --success-bg: #e1f3d8;
  --success-light: #f0f9eb;
  --warnning: #E6A23C;
  --warnning-bg: #faecd8;
  --warnning-light: #fdf6ec;
  --danger: #F56C6C;
  --danger-bg: #fde2e2;
  --danger-light: #fef0f0;
  --info: #909399;
  --info-bg: #e9e9eb;
  --info-light: #f4f4f5;


  /* 最小 */
  --font-xs: 0.75rem;
  /* 功能点、工具、说明、注释...(中文小字) */
  --font-sm: 0.875rem;
  /* 导读、正文... */
  --font-base: 1rem;
  /* 头条、标题、 */
  --font-xl: 1.25rem;
  /* 大标题、按钮.. */
  --font-2xl: 1.5rem;

  /* 字体图标 用于点击 */
  --iconfonts: 1.4rem;
  --iconfonts_height: 60rpx;
  --suspendZIndex: 999;
  --border-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.12), 0 0 12rpx rgba(0, 0, 0, 0.04);
  --border-shadow-light: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
  /* 拟态阴影 */
  --mim-diffusance: 8rpx;
  --mim-color1: rgba(255, 255, 255, 1);
  --mim-color2: rgba(255, 255, 255, .5);
  --mim-color3: rgba(255, 255, 255, .1);
  --mim-color4: rgba(0, 0, 0, .15);
  --mim-shadow: calc(var(--mim-diffusance) / 2 * -1) calc(var(--mim-diffusance) / 2 * -1) calc(var(--mim-diffusance) * 2) var(--mim-color1),
    calc(var(--mim-diffusance) / 2 * -1) calc(var(--mim-diffusance) / 2 * -1) calc(var(--mim-diffusance) * 3) var(--mim-color2),
    inset calc(var(--mim-diffusance) / 2) calc(var(--mim-diffusance) / 2) calc(var(--mim-diffusance)) var(--mim-color3),
    calc(var(--mim-diffusance) / 2) calc(var(--mim-diffusance) / 2) 8px var(--mim-color4);
  --mim-shadow-inside: inset calc(var(--mim-diffusance) / 2 * -1) calc(var(--mim-diffusance) / 2 * -1) calc(var(--mim-diffusance) * 2) var(--mim-color1),
    inset calc(var(--mim-diffusance) / 2 * -1) calc(var(--mim-diffusance) / 2 * -1) calc(var(--mim-diffusance) * 3) var(--mim-color2),
    inset calc(var(--mim-diffusance) / 2) calc(var(--mim-diffusance) / 2) calc(var(--mim-diffusance)) var(--mim-color3),
    inset calc(var(--mim-diffusance) / 2) calc(var(--mim-diffusance) / 2) calc(var(--mim-diffusance) * 2) var(--mim-color4);
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  letter-spacing: 0.3px
}

.mask-ban {
  position: relative;
}

.mask-ban::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--black);
  opacity: 0.3;
  z-index: 9999;
}